<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			
			.check{
				display: block;
				width: 100px;
				height: 100px;
				margin: 100px auto;
				border-radius: 300px;
				-webkit-animation: fill .3s ease-in-out .5s forwards,scale .3s ease-in-out .8s forwards;
			}
			.check .check__circle{
				stroke-dasharray:943;
				stroke-dashoffset:943;
				-webkit-animation: stroke .5s ease-in-out forwards;
			}
			.check .check__right{
				stroke-dasharray:238 238;
				stroke-dashoffset:238;
				-webkit-animation: stroke .5s ease 1s forwards;
			}
			@-webkit-keyframes stroke{
				100%{
					stroke-dashoffset: 0;
				}
			}
			@-webkit-keyframes fill{
				100%{
					box-shadow: inset 0 0 0 300px #84EB7C;
				}
			}
			@-webkit-keyframes scale{
				0%,100%{
					transform: scale(1);
				}
				50%{transform: scale(1.1);}
			}
			.animate-tabbar{
				display: flex;
			}
			.animate-tabbar__item{
				display: block;
				width: 25%;
			}
			.animate-tabbar__main{
				display: block;
				margin: 0 auto;
			}
			.animate-tabbar__text{
				text-align: center;
				color: rgb(210,210,210);
			}
			.main__home{
				transform-origin: center bottom;
			}
			.main__search{
				stroke-dasharray: 122;
				stroke-dashoffset: 122;
			}
			.main__star{
				transform-origin: 70px 20px;
				opacity: 0;
			}
			.main__circle{
				transform-origin: 7px 60px;
				opacity: 0;
			}
			@-webkit-keyframes fade{
				0%{opacity: 0;transform: scale(0);}
				50%{opacity: 1;transform: scale(1);}
				100%{opacity: 0;transform: scale(1.5);}
			}
			@-webkit-keyframes scaley{
				0%{transform: scaleY(1);}
				1%{fill:rgb(91,91,91)}
				30%{transform: scale(1,0.8);}
				70%{transform: scale(0.75,1.15);}
				100%{transform: scale(1,1);fill:rgb(91,91,91)}
			}
			@-webkit-keyframes strokeSearch{
				
				100%{
					stroke-dashoffset: 0;
				}
			}
			.is-active .animate-tabbar__text{
				color: rgb(91,91,91);
			}
			.is-active .main__home{
					animation: scaley 0.8s ease-in-out forwards;
				}
			.is-active .main__search{
					fill:none;
					animation: strokeSearch .5s ease-in-out .8s forwards;
				}
			.is-active .main__star{
					animation: fade .7s ease-in-out .2s forwards;
				}
			.is-active .main__circle{
					animation: fade .7s ease-in-out .4s forwards;
				}
			}
		</style>
	</head>
	<body>
		<svg class="check" viewBox="0 0 300 300">
			<circle 
				class="check__circle" 
				cx='150' 
				cy='150' 
				r="150" 
				fill="none"
				stroke="#84EB7C" 
				stroke-width="10" 
				stroke-linecap="round">
			</circle>
			<path 
				class="check__right" 
				stroke="#fff" 
				fill="none"
				stroke-width="10" 
				stroke-linecap="round" 
				d="M68 150 L124 208 L235 97"
				>
			</path>
		</svg>
		<div class="animate-tabbar">
			<div class="animate-tabbar__item">
				<svg class="animate-tabbar__main" width="40px" height="40px" viewBox="0 0 80 80">
					 <path class="main__home" fill="rgb(210,210,210)" d="m22.121,68.704a6.081,6.081 0 0 1 -6.072,-6.073l0,-26.706l-2.849,0a2.021,2.021 0 0 1 -2.821,-0.476a2.015,2.015 0 0 1 0.475,-2.821l28.348,-20.253a2.027,2.027 0 0 1 2.352,0l28.347,20.25a2.022,2.022 0 0 1 0.476,2.821a2.049,2.049 0 0 1 -1.655,0.85a2.013,2.013 0 0 1 -1.179,-0.38l-2.856,0l0,26.712c0.006,3.341 -0.719,6.073 -4.066,6.073l-38.5,0.003z" />
					 <path class="main__search" stroke-width="2.5" fill="#fff"; stroke="rgb(210,210,210)"  d="m50.268,59.815l-5.665,-5.665a9.584,9.584 0 0 1 -5.985,2.087a9.619,9.619 0 0 1 -9.619,-9.619a9.618,9.618 0 0 1 9.619,-9.618a9.615,9.615 0 0 1 9.617,9.621a9.7,9.7 0 0 1 -0.163,1.773l0,0a1.049,1.049 0 0 1 -1.027,0.834a1.049,1.049 0 0 1 -1.049,-1.048a1.065,1.065 0 0 1 0.012,-0.161l0,0a7.453,7.453 0 0 0 0.132,-1.4a7.519,7.519 0 0 0 -7.519,-7.52a7.52,7.52 0 0 0 -7.521,7.517a7.519,7.519 0 0 0 7.521,7.52a7.5,7.5 0 0 0 5.146,-2.035a0.919,0.919 0 0 1 0.117,-0.142a1.04,1.04 0 0 1 1.471,0l6.386,6.384a1.04,1.04 0 0 1 0,1.471a1.043,1.043 0 0 1 -0.735,0.3a1.043,1.043 0 0 1 -0.738,-0.299z" />
					 <path class="main__star" d="m67.75573,18.03858l2.81889,0l0,-2.81889l2.89164,0l0,2.81889l2.81889,0l0,2.89164l-2.81889,0l0,2.81889l-2.89164,0l0,-2.81889l-2.81889,0l0,-2.89164z" fill-opacity="null" stroke-opacity="null" stroke-width="null" stroke="null" fill="rgb(253,96,0)"/>
					 <circle class="main__circle" cx="7" cy="59.5" r='3' fill="rgb(108,99,255)"></circle>
				</svg>
				<p class="animate-tabbar__text">首页</p>
			</div>
			<div class="animate-tabbar__item">
				<svg class="animate-tabbar__main" width="40px" height="40px" viewBox="0 0 80 80">
					 <path class="main__home" fill="rgb(210,210,210)" d="m22.121,68.704a6.081,6.081 0 0 1 -6.072,-6.073l0,-26.706l-2.849,0a2.021,2.021 0 0 1 -2.821,-0.476a2.015,2.015 0 0 1 0.475,-2.821l28.348,-20.253a2.027,2.027 0 0 1 2.352,0l28.347,20.25a2.022,2.022 0 0 1 0.476,2.821a2.049,2.049 0 0 1 -1.655,0.85a2.013,2.013 0 0 1 -1.179,-0.38l-2.856,0l0,26.712c0.006,3.341 -0.719,6.073 -4.066,6.073l-38.5,0.003z" />
					 <path class="main__search" stroke-width="2.5" fill="#fff"; stroke="rgb(210,210,210)"  d="m50.268,59.815l-5.665,-5.665a9.584,9.584 0 0 1 -5.985,2.087a9.619,9.619 0 0 1 -9.619,-9.619a9.618,9.618 0 0 1 9.619,-9.618a9.615,9.615 0 0 1 9.617,9.621a9.7,9.7 0 0 1 -0.163,1.773l0,0a1.049,1.049 0 0 1 -1.027,0.834a1.049,1.049 0 0 1 -1.049,-1.048a1.065,1.065 0 0 1 0.012,-0.161l0,0a7.453,7.453 0 0 0 0.132,-1.4a7.519,7.519 0 0 0 -7.519,-7.52a7.52,7.52 0 0 0 -7.521,7.517a7.519,7.519 0 0 0 7.521,7.52a7.5,7.5 0 0 0 5.146,-2.035a0.919,0.919 0 0 1 0.117,-0.142a1.04,1.04 0 0 1 1.471,0l6.386,6.384a1.04,1.04 0 0 1 0,1.471a1.043,1.043 0 0 1 -0.735,0.3a1.043,1.043 0 0 1 -0.738,-0.299z" />
					 <path class="main__star" d="m67.75573,18.03858l2.81889,0l0,-2.81889l2.89164,0l0,2.81889l2.81889,0l0,2.89164l-2.81889,0l0,2.81889l-2.89164,0l0,-2.81889l-2.81889,0l0,-2.89164z" fill-opacity="null" stroke-opacity="null" stroke-width="null" stroke="null" fill="rgb(253,96,0)"/>
					 <circle class="main__circle" cx="7" cy="59.5" r='3' fill="rgb(108,99,255)"></circle>
				</svg>
				<p class="animate-tabbar__text">首页</p>
			</div>
		</div>
		<script type="text/javascript">
			var path = document.querySelector('.main__search');
			var length = path.getTotalLength();
			// console.log(length)
			// main__search:122
			var tabbarItem = document.querySelectorAll('.animate-tabbar__item');
			tabbarItem.forEach(item=>{
				item.classList.remove('is-active')
				item.addEventListener('click',function(e){
					this.classList.add('is-active')
				})
			})
			
		</script>
	</body>
</html>
